<template>
  <div class="collection-page">
    <!-- 顶部导航栏 -->
    <div class="header">
      <button class="back-btn" @click="goBack">
        <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
        >
          <polyline points="15 18 9 12 15 6"></polyline>
        </svg>
      </button>
      <h1 class="title">收藏</h1>
      <button class="search-toggle-btn" @click="showSearch = !showSearch">
        <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
        >
          <circle cx="11" cy="11" r="8"></circle>
          <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
        </svg>
      </button>
    </div>

    <!-- 搜索栏 -->
    <div v-if="showSearch" class="search-bar">
      <div class="search-input-container">
        <svg
            class="search-icon"
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
        >
          <circle cx="11" cy="11" r="8"></circle>
          <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
        </svg>
        <input
            type="text"
            placeholder="搜索收藏内容..."
            v-model="searchKeyword"
            class="search-input"
        />
        <button v-if="searchKeyword" class="search-clear-btn" @click="searchKeyword = ''">
          <svg
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
          >
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        </button>
      </div>
    </div>

    <!-- 标签切换栏 -->
    <div class="tabs">
      <button
          :class="['tab-btn', { active: activeTab === 'content' }]"
          @click="activeTab = 'content'"
      >
        内容
      </button>
      <button
          :class="['tab-btn', { active: activeTab === 'folder' }]"
          @click="activeTab = 'folder'"
      >
        收藏夹
      </button>
    </div>

    <!-- 内容区域 -->
    <div class="content">
      <div v-if="activeTab === 'content'" class="content-tab">
        <div v-if="filteredContent.length === 0 && !searchKeyword" class="empty-state">
          <div class="empty-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#ccc" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
              <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
            </svg>
          </div>
          <p class="empty-text">暂无收藏内容</p>
          <p class="empty-subtext">快去收藏喜欢的内容吧～</p>
        </div>
        <div v-else-if="filteredContent.length === 0 && searchKeyword" class="empty-state">
          <div class="empty-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#ccc" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="11" cy="11" r="8"></circle>
              <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
            </svg>
          </div>
          <p class="empty-text">没有找到相关内容</p>
          <p class="empty-subtext">没有找到与"{{ searchKeyword }}"相关的收藏内容</p>
        </div>
        <ul v-else class="post-list">
          <li
              v-for="(post, index) in filteredContent"
              :key="index"
              class="post-item"
              @click="viewPost(post)"
          >
<!--            帖子作者信息-->
            <div class="post-header">
              <img :src="post.user.avatar" alt="作者头像" class="author-avatar" />
              <div class="author-info">
                <div class="author-name-level">
                  <span class="name">{{ post.user.nickname }}</span>
                  <span class="level-tag" :style="{ backgroundColor: post.levelTagBg }">{{ post.levelTag }}</span>
                </div>
                <span class="tag" v-if="post.tag">{{ post.tag }}</span>
              </div>
            </div>
<!--            帖子内容-->
            <div class="post-content">
              <h3 class="post-title">{{ post.title }}</h3>
              <p class="post-desc">{{ post.desc }}</p>
              <div class="post-images" v-if="post.images && post.images.length > 0">
                <div
                    v-for="(img, imgIndex) in post.images.slice(0, 3)"
                    :key="imgIndex"
                    class="image-container"
                    :class="{ 'image-overlay-container': imgIndex === 2 && post.images.length > 3 }"
                >
                  <img
                      :src="img"
                      alt="帖子图片"
                      class="post-image"
                  />
                  <!-- 第三张图片上的角标 -->
                  <div
                      v-if="imgIndex === 2 && post.images.length > 3"
                      class="image-overlay"
                  >
                    <span class="image-count">+{{ post.images.length - 3 }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="post-footer">
              <span class="post-time">{{ post.publishTime }}</span>
              <div class="post-stats">
                <span class="comment-count">{{ post.commentCount }} 评论</span>
                <span class="like-count">{{ post.likeCount }} 点赞</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div v-else class="folder-tab">
        <div v-if="folderList.length === 0 && !searchKeyword" class="empty-state">
          <div class="empty-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#ccc" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
              <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
            </svg>
          </div>
          <p class="empty-text">暂无收藏夹</p>
          <p class="empty-subtext">快去创建收藏夹整理收藏内容吧～</p>
        </div>
        <div v-else-if="filteredFolders.length === 0 && searchKeyword" class="empty-state">
          <div class="empty-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#ccc" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="11" cy="11" r="8"></circle>
              <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
            </svg>
          </div>
          <p class="empty-text">没有找到相关收藏夹</p>
          <p class="empty-subtext">没有找到与"{{ searchKeyword }}"相关的收藏夹</p>
        </div>
        <ul v-else class="folder-list">
          <li
              v-for="(folder, index) in filteredFolders"
              :key="index"
              class="folder-item"
              @click="viewFolder(folder)"
          >
            <div class="folder-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
              </svg>
            </div>
            <div class="folder-info">
              <h3 class="folder-name">{{ folder.name }}</h3>
              <p class="folder-count">{{ folder.itemCount || 0 }} 个项目</p>
            </div>
            <div class="folder-arrow">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="9 18 15 12 9 6"></polyline>
              </svg>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <!-- 底部清理提示 -->
    <div class="clean-tip">
      因作者删除等原因，部分内容已失效 <span class="clean-btn">点击清理</span>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted} from 'vue';
import {useRoute, useRouter} from "vue-router";
import axios from "@/utils/axios.ts";

const route = useRoute();
const router = useRouter();
// 控制搜索栏显示隐藏
const showSearch = ref(false);
// 搜索关键词
const searchKeyword = ref('');
// 激活的标签页（content 或 folder）
const activeTab = ref('content');

const userCollectionsInit = () =>{
  const userPostsUrl = '/api/postCollections/getUserPostsAndAuthor?userId=' + route.params.id;
  axios.get(userPostsUrl).then(res => {
    console.log(res.data);
    contentList.value = res.data;
  }).catch(err => {
    console.log(err);
  });
}
onMounted(() => {
  userCollectionsInit();
});
// 模拟内容列表数据
const contentList = ref([
  {
    user:{
      nickname:null,
      avatar:null,
    }
  },
]);

// 模拟收藏夹列表数据
const folderList = ref([
  // { id: 1, name: '游戏相关', itemCount: 15 },
  // { id: 2, name: '大学话题', itemCount: 8 },
  // { id: 3, name: '技术分享', itemCount: 22 },
]);

// 筛选后的内容列表（根据搜索关键词）
const filteredContent = computed(() => {
  if (!searchKeyword.value) return contentList.value;
  return contentList.value.filter(post =>
      post.title.includes(searchKeyword.value) || post.authorName.includes(searchKeyword.value)
  );
});

// 筛选后的收藏夹列表（根据搜索关键词）
const filteredFolders = computed(() => {
  if (!searchKeyword.value) return folderList.value;
  return folderList.value.filter(folder =>
      folder.name.includes(searchKeyword.value)
  );
});

// 返回上一页方法
const goBack = () => {
  router.push({
    path: '/profile',
  })
};

// 查看帖子详情
const viewPost = (post) => {
  console.log('查看帖子:', post.title);
  // 这里可以跳转到帖子详情页
};

// 查看收藏夹详情
const viewFolder = (folder) => {
  console.log('查看收藏夹:', folder.name);
  // 这里可以跳转到收藏夹详情页
};
</script>

<style scoped>
.collection-page {
  width: 100%;
  height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4edf9 100%);
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: linear-gradient(120deg, #ffffff, #f8f9ff);
  border-bottom: 1px solid #e5e5e5;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.back-btn,
.search-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: background-color 0.3s;
}

.back-btn:hover,
.search-toggle-btn:hover {
  background-color: #f1f5f9;
}

.title {
  font-size: 18px;
  font-weight: bold;
  color: #1e293b;
}

.search-bar {
  padding: 12px 16px;
  background: linear-gradient(120deg, #ffffff, #f8f9ff);
  border-bottom: 1px solid #e5e5e5;
}

.search-input-container {
  display: flex;
  align-items: center;
  background-color: #f8fafc;
  border-radius: 24px;
  padding: 0 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
  transition: all 0.3s;
}

.search-input-container:focus-within {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  background-color: #ffffff;
}

.search-icon {
  color: #94a3b8;
  margin-right: 8px;
}

.search-input {
  flex: 1;
  padding: 12px 0;
  border: none;
  outline: none;
  font-size: 14px;
  background: transparent;
  color: #1e293b;
}

.search-input::placeholder {
  color: #94a3b8;
}

.search-clear-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: #94a3b8;
  border-radius: 50%;
  transition: background-color 0.3s;
}

.search-clear-btn:hover {
  background-color: #f1f5f9;
  color: #64748b;
}

.tabs {
  display: flex;
  padding: 0 16px;
  background: linear-gradient(120deg, #ffffff, #f8f9ff);
  border-bottom: 1px solid #e5e5e5;
}

.tab-btn {
  flex: 1;
  padding: 16px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  text-align: center;
  position: relative;
  color: #64748b;
  font-weight: 500;
  transition: color 0.3s;
}

.tab-btn.active {
  color: #667eea;
  font-weight: 600;
}

.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 3px;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 3px;
}

.content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4edf9 100%);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.empty-icon {
  margin-bottom: 16px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  padding: 12px;
}

.empty-text {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 8px;
}

.empty-subtext {
  font-size: 14px;
  color: #64748b;
}

.post-list {
  list-style: none;
  padding: 0;
}

.post-item {
  margin-bottom: 20px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 16px;
  background: white;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1px solid #f1f5f9;
}

.post-item:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-3px);
}

.post-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 12px;
  object-fit: cover;
  border: 2px solid #f1f5f9;
}

.author-name-level {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.name {
  font-weight: 600;
  margin-right: 8px;
  font-size: 15px;
  color: #1e293b;
}

.level-tag {
  padding: 2px 8px;
  border-radius: 12px;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
}

.tag {
  background: linear-gradient(135deg, #e0f2fe, #cffafe);
  color: #0284c7;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.post-content {
  margin-bottom: 12px;
}

.post-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #1e293b;
  line-height: 1.4;
}

.post-desc {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 12px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 8px;
  margin-bottom: 12px;
}

.image-container {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1/1;
}

.post-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.post-image:hover {
  transform: scale(1.05);
}

.image-overlay-container {
  position: relative;
}

.image-overlay {
  position: absolute;
  top: 0;
  right: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.7), rgba(0,0,0,0.7));
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 12px;
  transform: translate(20%, -20%);
}

.post-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #94a3b8;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
}

.post-stats {
  display: flex;
  align-items: center;
}

.comment-count,
.like-count {
  margin-left: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.folder-list {
  list-style: none;
  padding: 0;
}

.folder-item {
  display: flex;
  align-items: center;
  padding: 16px;
  border-radius: 16px;
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #f1f5f9;
}

.folder-item:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-3px);
}

.folder-icon {
  margin-right: 16px;
  color: #667eea;
  background: #f1f5f9;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.folder-info {
  flex: 1;
}

.folder-name {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #1e293b;
}

.folder-count {
  font-size: 13px;
  color: #64748b;
}

.folder-arrow {
  color: #94a3b8;
}

.clean-tip {
  text-align: center;
  padding: 20px;
  color: #64748b;
  font-size: 14px;
  border-top: 1px solid #e5e5e5;
  background: linear-gradient(120deg, #ffffff, #f8f9ff);
}

.clean-btn {
  color: #667eea;
  cursor: pointer;
  font-weight: 600;
  transition: color 0.3s;
}

.clean-btn:hover {
  color: #764ba2;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header {
    padding: 12px;
  }

  .title {
    font-size: 16px;
  }

  .content {
    padding: 12px;
  }

  .post-item {
    padding: 12px;
  }

  .folder-item {
    padding: 12px;
  }

  .post-images {
    grid-gap: 6px;
  }

  .image-overlay {
    font-size: 10px;
    padding: 2px 6px;
  }
}
</style>

